<template>
    <div class="person">
        <ul>
            <li v-for="person in list" :key="person.id"> {{ person.name }}--{{ person.age }}</li>             <!-- 一般要写key  -->
        </ul>
    </div>
</template>


<script lang="ts" setup name="Person">
    import {defineProps,withDefaults} from 'vue';
    import {type Persons} from '@/types'
    //接受App传过来的list
    // defineProps(['list'])

    //接受list+限制类型
    // defineProps<{list:Persons}>()

    //接受list+?限制必要性
    // defineProps<{list?:Persons}>()

    //在上面基础上制定了默认值
    withDefaults(defineProps<{list?:Persons}>(),{
        list:()=>[{id:'lsjdjdf01',name:"张三",age:18}]
    })
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>